<template>
	<view class="tips-cont">
		<view class="top">
			点击" <text class="icon" v-for="(item, index) in list" :key="index"></text> "添加到我的小程序,
			<text @click="onRemove" class="remove"></text>
		</view>
		<view class="bottom">微信首页下拉可快速访问小程序</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			onRemove() {
				this.$emit('remove')
			}
		}
	}
</script>

<style lang="scss">
	.tips-cont {
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: fixed;
		top: 20rpx;
		right: 40rpx;
		z-index: 1000;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 40rpx rgba(0, 0, 0, .3);
		font-size: 28rpx;
		color: #000;
	}

	.tips-cont::before {
		content: '';
		position: absolute;
		top: -20rpx;
		right: 100rpx;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 15rpx 20rpx 15rpx;
		border-color: transparent transparent #fff;
	}

	.top {
		display: flex;
		align-items: center;
		margin-bottom: 5rpx;
	}

	.icon {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: #000;
		margin: 3rpx;
	}

	.icon:nth-child(2) {
		width: 12rpx;
		height: 12rpx;
	}

	.remove {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: rgb(212, 212, 212);
		position: relative;
		transform: rotate(45deg);
		margin-left: 20rpx;
	}

	.remove::before,
	.remove::after {
		content: '';
		position: absolute;
		background-color: #fff;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.remove::before {
		width: 60%;
		height: 1px;
	}

	.remove::after {
		width: 1px;
		height: 60%;
	}
</style>
